<template>
	<div>
		<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules"
			label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
			<el-form-item label="商品名称" prop="ProductName">
				<el-input v-model="ruleForm.ProductName" />
			</el-form-item>
			<el-form-item label="价格" prop="Price">
				<el-input v-model="ruleForm.Price" />
			</el-form-item>
			<el-form-item label="图片" prop="ProductImg">
			<el-upload
    			 class="avatar-uploader"
   				 action="http://localhost:5242/api/images"
    			:show-file-list="false"
   			    :on-success="handleAvatarSuccess"
   			    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
		</el-form-item>
			<el-form-item label="材质" prop="Material">
				<el-input v-model="ruleForm.Material" />
			</el-form-item>
            <el-form-item label="大小" prop="Specifications">
				<el-input v-model="ruleForm.Specifications" placeholder="请选择大小" />
			</el-form-item>
			<el-form-item label="状态" prop="Status">
				<el-select-v2 v-model="ruleForm.Status" placeholder="请选择状态" :options="optionsStatus" />
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="submitForm(ruleFormRef)">
					保存
				</el-button>
				<el-button @click="resetForm(ruleFormRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<style>
.avatar{
	width: 175px;
	height: 175px;
}
</style>
<script lang="ts" setup>
	import { reactive, ref, onMounted } from 'vue'
	import  { ComponentSize, FormInstance, FormRules,ElNotification ,ElForm,ElFormItem, ElMessage } from 'element-plus'
	import type { UploadProps } from 'element-plus'
	import produapi from "@/api/produapi"

	const props = defineProps({
		Id: Number,
	});
	const emit = defineEmits(['onSave'])

	interface RuleForm {
		ProductName : string
		Price : number
		ProductImg : string
		Material:string
        Specifications:string
		Status : number
	}
	const imageUrl = ref()
	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = ref<RuleForm>({
	
			ProductName: '',
			Price: 0,
			ProductImg: '',
			Material:'',
            Specifications:'',
			Status: 1,
		
	})
	const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
	ruleForm.value.ProductImg = response.data[0]
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

	const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg'&&rawFile.type !== 'image/png') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
	const rules = reactive<FormRules<RuleForm>>({
		ProductName: [
			{ required: true, message: '请输入商品名称', trigger: 'blur' },
			{ min: 2, max: 10, message: '2-10个字符', trigger: 'blur' },
		],
		Price: [
			{ required: true, message: '请输入商品价格', trigger: 'blur' },
			
		],
		Material:[
			{required:true,message:'请输入材质名称',trigger:'blur'},
			{ min: 2, max: 8, message: '2-8个字符', trigger: 'blur' },
		]

	})

    

	const optionsStatus = [
		{
			value: 1,
			label: "正常",
		},
		{
			value: 0,
			label: "删除",
		},
		{
			value: -1,
			label: "禁用",
		}
	]

	const getData = () => {
		produapi.get({ id: props.Id }).then(res => {
			console.log("aaa=", res.data);
			ruleForm.value = res.data
		})
	}
	onMounted(() => {
		getData();
	})
	const submitForm = async (formEl : FormInstance | undefined) => {		
		if (!formEl) return
		await formEl.validate(valid => {
			
			if (valid) {
				console.log("ruleForm.data", ruleForm.value)

				produapi.Update(ruleForm.value).then(res => {
					if (res.code == 1) {
						ElNotification({
							title: 'Success',
							message: '修改成功',
							type: 'success',
							duration: 800,
							onClose: () => {
								emit("onSave", true)
							}
						})
					} else {
						ElNotification({
							title: 'Error',
							message: '失败',
							type: 'Error',
							duration: 800,
						})
					}
				}).catch(err => {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'Error',
						duration: 800,
					})
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}

	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}
</script>